<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            cursor: pointer;
        }
    </style>
</head>

<body>
    <input class="ipt" type="text" placeholder="请输入搜索">
    <div class="cat"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script>
        // function getData(data){
        //     console.log(data);
        // }
        // var script = document.createElement("script");
        // script.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=椒盐皮皮虾&cb=getData";
        // document.body.appendChild(script);
        var time = null;
        jQuery(".ipt").on({
            input: function () {
                clearTimeout(time);
                if(!this.value)return;
                var self = this;
                time = setTimeout(function () {
                    jQuery.ajax({
                        type: "get",
                        url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                        data: {
                            wd: `${self.value}`
                        },
                        dataType: "jsonp",
                        jsonp: "cb",
                        success: function (data) {
                            console.log(data);
                            jQuery(".cat").html("");
                            var temp = document.createDocumentFragment();
                            data.s.forEach(function(value){
                                jQuery(`<div>${value}</div>`).appendTo(jQuery(temp)).on({
                                    click:function(){
                                        jQuery(".ipt").val(this.textContent);
                                        jQuery(".ipt").trigger("input");
                                    }
                                });
                            });
                            jQuery(temp).appendTo(jQuery(".cat"))
                        }
                    });
                }, 1000)
            }
        })
    </script>
</body>

</html>